<template>
	<!-- 是否启用 vue-router 模式。 
        启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。 
    -->
	<el-menu
		class="el-menu-vertical-demo"
		active-text-color="#79bbff"
		background-color="#1e2e3d"
		text-color="#fff"
		:collapse="!isCollapse"
		router
		:default-active="'sys'"
		:default-openeds="['sys/menu']"
	>
		<NavMenu v-for="item in menuList" :menu="item" :key="item.path"></NavMenu>
	</el-menu>
</template>

<script setup lang="ts">
import { useMenuStore } from '@/stores/modules/menu'
import { computed, inject } from 'vue'
import NavMenu from './NavMenu.vue'
// 方法四: 跨组件通讯
const isCollapse = inject('isCollapse')
const menuStore = useMenuStore()
const menuList = computed(() => menuStore.list) //动态菜单数据
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
}
</style>
